Search 搜尋

使用搜尋欄和檢視透過搜尋查詢來瀏覽產品

當使用者輸入時，搜尋欄可以顯示推薦的關鍵詞或短語

始終在搜尋檢視中顯示結果

搜尋欄可以包含一個前置的搜尋圖示和一個可選的後置圖示

1 search bar 2 search view

1 Container2. Leading icon button 3. Supporting text4. Avatar or trailing icon (optional)

Element 元素	Attribute 屬性	Value 值
Container 容器	Width 寬度	Min: 360dp; Max: 720dp
	Height 高度	56dp
	Label alignment 標籤對齊	Start-aligned 起始對齊
	Left padding 左內邊距	16dp
	Right padding 右內邊距	16dp
	Leading icon and label padding引導圖示和標籤內邊距	16dp
	Label and trailing icon padding標籤和尾部圖示內邊距	16dp
Avatar 頭像	Size 尺寸	30dp

Search bar configurations搜尋欄配置

1 With avatar 帶頭像 2 With one trailing icon button帶有一個尾部圖示按鈕 3 With two trailing icon buttons帶有兩個尾部圖示按鈕 4 With avatar and trailing icon button 帶有頭像和尾隨圖示按鈕

1. Container2. Header3. Leading icon button4. Supporting text5. Trailing icon button6. Input text7. Divider

Element 元素	Attribute 屬性	Value 值
Container (full screen) 容器（全屏）	Width 寬度	Full width 全寬
	Height 高度	Full height 全高
Container (docked) 容器（停靠）	Width 寬度	Min: 360dp; Max: 720dp
	Height 高度	Min: 240dp; Max: 2/3 of screen height
Header 標題	Height (full screen) 高度（全屏）	72dp
	Height (docked) 高度（停靠）	56dp
	Label alignment 標籤對齊	Left-aligned 左對齊
	Left padding 左內邊距	16dp
	Right padding 右內邊距	16dp
	Leading icon and label padding引導圖示和標籤內邊距	16dp
	Label and trailing icon padding標籤和尾部圖示內邊距	16dp

Search view configurations搜尋檢視配置

1 Search view - full screen搜尋檢視- 全屏 2 Search view- docked搜尋檢視- 停靠